<?php
/**
 * Template Name: My Calendar
 *
 */
//wp_cache_post_change( get_the_ID() );
get_header(); ?>

<div class="container">
    <ul class="nav nav-pills" style="float: right;">
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Actions <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop4" style="right: 0;left: auto;">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#slotModal" data-toggle="modal">Add Slot</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">View <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop4" style="right: 0;left: auto;">
                <li role="presentation"><a data-hide-inactive-slot="" tabindex="-1"><div class="dot" style="background: #ddd;"></div> Hide Inactive Slots</a></li>
                <li role="presentation"><a data-hide-active-slot="" tabindex="-1"><div class="dot" style="background: #3f7fff;"></div> Hide Active Slots</a></li>
                <li role="presentation"><a data-hide-booking="" tabindex="-1"><div class="dot" style="background: #019f10;"></div> Hide Bookings</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a data-expand-all="" tabindex="-1">Expand All Items</a></li>
            </ul>
        </li>
    </ul>
    <h1><?php the_title() ?></h1>

    <div class="row-fluid">
        <div class="span12">

            <div style="float: right;line-height: 39px;">
                <div style="background: #ddd;width: 10px;height: 10px;display: inline-block;border-radius: 4px"></div> Inactive Slot
                                                                                                                       &nbsp; &nbsp;
                <div style="background: #3f7fff;width: 10px;height: 10px;display: inline-block;border-radius: 4px"></div> Active Slot
                                                                                                                       &nbsp; &nbsp;
                <div style="background: #019f10;width: 10px;height: 10px;display: inline-block;border-radius: 4px"></div> Booking
                                                                                                                       &nbsp; &nbsp;
                <div style="background: #dd169f;width: 10px;height: 10px;display: inline-block;border-radius: 4px"></div> Special Price

            </div>
            <select id="date-select" style="width:300px">
                <?
                for ($a = -6; $a <= 13; $a++) {
                    if (date('l', strtotime('+' . $a . ' day')) == "Sunday") {
                        echo '<option value="'
                            . date('Y-m-d', strtotime('+' . $a . ' day'))
                            . '">Week Starting - '
                            . date('l, j F Y', strtotime('+' . $a . ' day'))
                            . '</option>';
                    }
                }
                ?>
            </select>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
                <table id="calendar-week" class="table table-bordered table-striped">
                    <thead>
                    <tr style="display: none">
                        <th>Sun</th>
                        <th>Mon</th>
                        <th>Tue</th>
                        <th>Wed</th>
                        <th>Thu</th>
                        <th>Fri</th>
                        <th>Sat</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr style="display: none">
                        <td data-date="">
                            <div class="the-date">22 March</div>
                            <div data-slot="23" class="dropdown open">
                                <div><strong>Pitch 1</strong></div>
                                <div>09:00 - 10:00</div>
                                <div class="collapse">
                                    <hr>
                                    <a data-dropdown="" href="#">Actions <i class="icon-arrow-down"></i></a>
                                </div>

                                <ul class="dropdown-menu" role="menu">
                                    <li><a tabindex="-1" href="#">Action</a></li>
                                    <li><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                                    <li><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div data-slot="23">
                                <div><strong>Pitch 1</strong></div>
                                <div>10:00 - 11:00</div>
                                <div class="collapse">
                                    <hr>
                                    <a class="btn btn-inverse btn-mini">View &raquo;</a>
                                </div>
                            </div>
                            <div data-slot="23">
                                <div><strong>Pitch 1</strong></div>
                                <div>11:00 - 12:00</div>
                                <div class="collapse">
                                    <hr>
                                    <a class="btn btn-inverse btn-mini">View &raquo;</a>
                                </div>
                            </div>
                            <div data-booking="23">
                                <div><strong>Pitch 1</strong></div>
                                <div>12:00 - 13:00</div>
                                <div class="collapse">
                                    <hr>
                                    Nathan Nelson <br>
                                    07885294537
                                    <a class="btn btn-inverse btn-mini">View &raquo;</a>
                                </div>
                            </div>
                        </td>
                        <td data-date="">
                        </td>
                        <td data-date="">
                        </td>
                        <td data-date="">
                        </td>
                        <td data-date="">
                        </td>
                        <td data-date="">
                        </td>
                        <td data-date="">
                        </td>
                    </tr>
                    </tbody>

                </table>
        </div>
    </div>
</div>

<!-- Special Price Modal -->
<div id="specialModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="specialModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="specialModalLabel">Add Special Price</h3>
    </div>
    <div class="modal-body">

        <form id="SpecialForm" class="form-horizontal">
            <input type="hidden" name="form_date" />
            <input type="hidden" name="form_slot" />

            <div class="control-group">
                <label class="control-label">Current Price</label>

                <div class="controls current-price">
                    £55.00
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="Special">Special Price</label>

                <div class="controls">
                    <input id="Special" name="form_special" />
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button id="SpecialFormSubmit" type="submit" data-dismiss="modal" class="btn btn-primary">Set Special Price</button>
    </div>
</div>

<!-- Internal Booking Modal -->
<div id="InternalModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="internalModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="InternalModalLabel">Book this slot internally</h3>
    </div>
    <div class="modal-body">

        <form id="InternalForm" class="form-horizontal">
            <input type="hidden" name="form_date" />
            <input type="hidden" name="form_slot" />
            <input type="hidden" name="form_user" value="<?echo get_user_id(); ?>"/>

            <div class="control-group">
                <label class="control-label" for="Special">Internal Comments</label>

                <div class="controls">
                    <textarea id="Internal" name="form_comments" ></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button id="InternalFormSubmit" type="submit" data-dismiss="modal" class="btn btn-primary">Book Internally</button>
    </div>
</div>

<!-- Add Slot Modal -->
<div id="slotModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="slotModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="slotModalLabel">Add New Slot</h3>
    </div>
    <div class="modal-body">

        <form id="SlotForm" class="form-horizontal">
            <input type="hidden" name="new_slot_form" value="true"/>

            <div class="control-group">
                <label class="control-label" for="Pitch">Pitch</label>

                <div class="controls">
                    <select id="Pitch" name="form_pitch">
                        <option>All</option>
                        <?
                        $q = new WP_Query(array('post_type' => 'pitch', 'order' => 'ASC', 'posts_per_page' => 50000));
                        while ($q->have_posts()) : $q->the_post();
                            echo "<script>console.log('get_field(\'venue\', \'user_\'.get_user_id())',".get_field('venue', 'user_'.get_user_id()).")</script>";
                            echo '<script>console.log("getVenueID($q->post->ID)",'.getVenueID($q->post->ID).')</script>';
                            echo '<script>console.log("$q->post->ID",'.$q->post->ID.')</script>';
                            if (get_field('venue', 'user_'.get_user_id()) == getVenueID($q->post->ID)) {
                                echo '<option data-venue="' . getVenueID($q->post->ID) . '" value="' . $q->post->ID . '">' . get_field('pid') . ' - ' . get_field('name', getVenueID($q->post->ID)) . '</option>';
                            }
                        endwhile;
                        wp_reset_postdata();
                        ?>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="Day">Day</label>

                <div class="controls">
                    <!--<select multiple id="Day" name="form_day" style="height: 140px;">-->
                    <select id="Day" name="form_day">
                        <option>Monday</option>
                        <option>Tuesday</option>
                        <option>Wednesday</option>
                        <option>Thursday</option>
                        <option>Friday</option>
                        <option>Saturday</option>
                        <option>Sunday</option>
                    </select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="Intervals">Intervals</label>

                <div class="controls">
                    <select id="Intervals" name="intervals">
                        <option value="">Single Slot</option>
                        <option value="15">15 Minutes</option>
                        <option value="30">30 Minutes</option>
                        <option value="45">45 Minutes</option>
                        <option value="60">60 Minutes</option>
                        <option value="75">75 Minutes</option>
                        <option value="90">90 Minutes</option>
                        <option value="105">105 Minutes</option>
                        <option value="120">120 Minutes</option>
                    </select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="StartTime">Start Time</label>

                <div class="controls">
                    <select id="StartTime" name="form_start_time">
                        <?
                        $b = 0;
                        for ($a = 9; $a < 24; $a) {

                            echo '<option value="' . dp2($a) . dp2($b) . '">' . dp2($a) . ':' . dp2($b) . '</option>';
                            $b += 15;
                            if ($b == 60) {
                                $b = 0;
                                $a++;
                            }
                        }
                        ?>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="EndTime">End Time</label>

                <div class="controls">
                    <select id="EndTime" name="form_end_time">
                        <?
                        $b = 15;
                        for ($a = 9; $a < 24; $a) {

                            echo '<option value="' . dp2($a) . dp2($b) . '">' . dp2($a) . ':' . dp2($b) . '</option>';
                            $b += 15;
                            if ($b == 60) {
                                $b = 0;
                                $a++;
                            }
                        }
                        ?>
                        <option value="2359">23:59</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="Price">Price</label>

                <div class="controls">
                    <input id="Price" name="form_price" value="45.00" type="text"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Active</label>

                <div class="controls">
                    <label class="radio">
                        <input type="radio" name="form_active" id="Active1" value="true" checked="">
                        True
                    </label>
                    <label class="radio">
                        <input type="radio" name="form_active" id="Active2" value="false" checked="" selected>
                        False
                    </label>

                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button id="SlotFormSubmit" type="submit" data-dismiss="modal" class="btn btn-primary">Add Slots</button>
    </div>
</div>


<?php get_footer(); ?>

<script src="<?php echo get_template_directory_uri(); ?>/js/date.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/PW.myCalendar.js"></script>

<script src="<?php echo get_template_directory_uri(); ?>/js/PW.addNewSlot.js"></script>
<script>
    $(function () {
        if (<?php
        if (is_user_logged_in()) {
            echo 'false';
        } else {
            echo 'true';
        }
        ?>) {
            $('#loginModal').modal({
                backdrop:'static '
            });
            $('#loginModal').on('hide', function () {
                return false;
            });
        }
        <? $venue = get_field('venue', 'user_'.get_user_id())  ?>
        var options = {
            'venue':'<? echo $venue;  ?>'
        };
        PW.myCalendar.init(options);

        var options = {};
        PW.addNewSlot.init(options);
    });
</script>